<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
    form标签表示一个包含若干个表单元素的区域
    标签体部分就是一个个的表单元素
    action:当提交表单后跳转的地址,一般用于跳转到服务的地址,也可以当做链接使用
    input标签:可以定义不同的表单元素,通过type属性控制表单元素的类型
        type:控制表单元素的类型,常见值如下
            text:单行文本框
            password:密码框,输入的内容不可见
            radio:单选框,同一组单选框同一时间只能选中其中一个
                当元素的name属性值相同时,表示是同一组元素
            file:文件选择器,可以选择一个本地文件
            checkbox:多选框
            hidden:隐藏域,此处内容不在页面中展示,但是表单提交时包含该元素的数据
            submit:提交按钮,点击按钮之后表单提交,跳转到action指向的url地址
            reset:重置按钮,点击后表单还原到初始状态
            button:普通按钮,点击后没有任何效果,一般与js联合使用
        value属性:为元素赋予服务器值,不同类型的元素,其效果也不一样
            对于输入框,直接设置表示设置了默认值
            对于单选与多选,表示提交时获取的对应选项的值
        name属性:获取元素的数据,当表单提交后,跟随表单提交到服务器的数据的key
            对于单选框与多选框,如果没有设置服务器值,默认其值为on,表示选中
            如果设置了服务器值,则获取的是对应的服务器值
        checked:表示默认选中对应的单选或者多选的选项
        required:必须项,表示该元素属于必填项,不填写无法提交表单
        readonly:只读,只能看,不能改
        disabled:使得元素失效,相当于该表单中没有该元素,也无法修改元素的值
        placeholder:提示文字,在表单元素中展示提示信息,当表单元素没有内容时显示,如果有内容则消失
-->
<form action="#">
<!--    编号:<input type="text" name="id" value="1" readonly><br>-->
    <input type="hidden" name="id" value="1">
    用户名:<input type="text" name="username" value="admin" required readonly size="20"><br>
    文本框:<input type="text" name="username" placeholder="请输入用户名" size="10"><br>
    邮箱:<input type="email" name="email"><br>
    密码:<input type="password" name="password" value="123456" disabled><br>
    性别:<input type="radio" name="gender" value="man" checked="checked">男
        <input type="radio" name="gender" value="woman" checked>女<br>
<!--    文件:<input type="file" name="file" accept="text/html"><br>-->
    文件:<input type="file" name="file" accept="image/gif"><br>
    兴趣:
    <input type="checkbox" name="hobbies" value="eat" checked>吃饭
    <input type="checkbox" name="hobbies" value="sleep" checked>睡觉
    <input type="checkbox" name="hobbies" value="beat">打豆豆<br>
    <input type="submit">
    <input type="reset">
    <input type="button">
    <input type="image" src="../images/login.gif">
</form>
</body>
</html>